<template>
    <div class="add-role-container">
        <el-card class="role-card">
            <template #header>
                <div class="card-header">
                    <el-icon class="header-icon">
                        <Avatar />
                    </el-icon>
                    <span class="card-title">添加角色</span>
                </div>
            </template>

            <el-form ref="roleFormRef" :model="roleForm" :rules="rules" label-width="120px" class="role-form">
                <el-form-item label="角色名称：" prop="roleName">
                    <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" />
                </el-form-item>



                <el-form-item label="权限分配：" prop="PermissonIds">
                    <el-checkbox-group v-model="roleForm.permissonIds">
                        <el-checkbox v-for="item in RoleData" :value="item.permissonId" :label="item.permissonName"
                            name="permissonIds">
                            {{ item.permissonName }}
                        </el-checkbox>

                    </el-checkbox-group>
                </el-form-item>


                <el-form-item class="form-actions">
                    <el-button type="primary" @click="Add">
                        <el-icon>
                            <Check />
                        </el-icon>
                        保存
                    </el-button>
                    <el-button @click="handleBack">
                        <el-icon>
                            <ArrowLeft />
                        </el-icon>
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { Check, ArrowLeft, Avatar } from '@element-plus/icons-vue'
import axios from 'axios'
import { write } from '@/Until/axiosHepler'

const router = useRouter()
const roleFormRef = ref<FormInstance>()



// 角色表单数据类型定义
interface RoleForm {
    "roleName": string,
    permissonIds: []
}

// 初始化表单数据
const roleForm = reactive<RoleForm>({
    "roleName": "",
    permissonIds: []
})

// 表单验证规则
const rules = reactive<FormRules<RoleForm>>({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },

    ],
    // PermissonId: [
    //     { max: 200, message: '至少选择一个权限', trigger: 'blur' }
    // ]

})

const Add = () => {
    write.post("api/Manger/AddRole", roleForm).then((res => {
        if (res.data.code == 200) {
            if (roleForm.permissonIds.length == 0) {
                ElMessage.error("请选择权限");
                return;
            }
            ElMessage.success("添加角色成功");
        }
        else {
            ElMessage.error("添加角色失败");
        }
    }))
}
onMounted(() => {
    roleList();
})
const RoleData = ref<any[]>([])
const roleList = () => {
    axios.get("http://localhost:5134/api/User/PermissonList").then((res) => {
        RoleData.value = res.data.data;

    })
}
// 保存角色的API调用
const saveRole = async () => {
    try {
        const response = await axios.post('http://localhost:5134/api/Role/AddRole', roleForm)

        if (response.data.code === 200) {
            return response.data
        } else {
            throw new Error(response.data.message || '添加角色失败')
        }
    } catch (error) {
        console.error('保存角色出错:', error)
        throw error
    }
}

// 返回上一页
const handleBack = () => {
    router.back()
}
</script>

<style scoped>
.add-role-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    background: #f5f7fa;
    min-height: calc(100vh - 64px);
}

.role-card {
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    background: white;
    position: relative;
    overflow: hidden;
}

.role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #409eff, #67c23a);
    z-index: 1;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;
}

.header-icon {
    font-size: 22px;
    color: #409eff;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
}

.role-form {
    width: 100%;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.permission-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    width: 100%;
}

.permission-checkbox {
    margin: 0;
}

:deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
}

:deep(.el-input__wrapper) {
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #409eff;
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-textarea__inner) {
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.el-textarea__inner:hover) {
    box-shadow: 0 0 0 1px #409eff;
}

:deep(.el-textarea__inner:focus) {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-button) {
    min-width: 100px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

:deep(.el-button:hover) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:deep(.el-button--primary) {
    background: linear-gradient(135deg, #409eff, #67c23a);
    border: none;
}

:deep(.el-checkbox) {
    margin-right: 0;
}

:deep(.el-checkbox__label) {
    font-weight: 500;
    color: #606266;
}

:deep(.el-switch) {
    --el-switch-on-color: #67c23a;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .add-role-container {
        padding: 20px 10px;
    }

    .role-card {
        max-width: 100%;
    }

    .form-actions {
        flex-direction: column;
        align-items: center;
    }

    :deep(.el-button) {
        width: 100%;
        max-width: 200px;
    }

    .permission-group {
        grid-template-columns: 1fr;
    }
}
</style>
